$S:     420px;
$M:     768px;
$L:     1170px;
$MS:     $S;
$MM:     $M;
$ML:     $L;

@mixin MQ($canvas) {
  @if $canvas == S {
   @media only screen and (min-width: $S) { @content; } 
  }
  @else if $canvas == M {
   @media only screen and (min-width: $M) { @content; } 
  }
  @else if $canvas == L {
   @media only screen and (min-width: $L) { @content; } 
  }
  @else if $canvas == MS{
    @media only screen and (max-width: $MS) { @content; }
  }
  @else if $canvas == MM{
    @media only screen and (max-width: $MM) { @content; }
  }
  @else if $canvas == ML{
    @media only screen and (max-width: $ML) { @content; }
  }
}

@mixin column($percentage, $float-direction:left) {
  width: 100% * $percentage;
  float: $float-direction;
}